<template>
  <div class="upload-file-list">
    <div class="upload-list-content" :class="[file.status]">
      <div class="upload-list-icon">
        <i v-if="file.status === 'error'" class="iconfont icon-close-line error"></i>
        <i v-else-if="file.status === 'uploading'" class="iconfont icon-loader-4-fill loader-icon"></i>
        <i v-else class="iconfont icon-check-line done"></i>
      </div>
      <div class="upload-list-name">
        <p class="name" :title="file.name">{{ file.name }}</p>
        <p class="message" :title="file.message ? file.message : file.name">{{ file.message ? file.message : file.name }}</p>
      </div>
      <div class="upload-list-handle" @click="handleDelete(file)">
        <i class="iconfont icon-delete-bin-line"></i>
      </div>
    </div>

    <div v-if="file.status === 'uploading'" class="upload-list-progress progress-class">
      <a-progress :percent="file.progress" />
    </div>
  </div>
</template>

<script setup lang="ts">
  export interface FileListType {
    fileName?: string
    id?: number
    size?: number
    url: string
    status: string
    name: string
    progress?: number
    message?: string
  }

  export interface UploadListProp {
    file: FileListType
  }

  withDefaults(defineProps<UploadListProp>(), {
    file: () => {
      return {
        fileName: '',
        id: 0,
        size: 0,
        url: '',
        status: '',
        name: ''
      }
    }
  })

  const emits = defineEmits<{
    (e: 'on-delete', params: FileListType): void
  }>()

  const handleDelete = (file: FileListType) => {
    console.log(file)
    emits('on-delete', file)
  }
</script>

<style lang="less" scoped>
  .upload-file-list {
    margin: 4px 0;
    // display: flex;
    width: 100%;

    .upload-list-content {
      display: flex;
      align-items: center;
      padding: 0 8px;
      width: 100%;
      height: 30px;
      font-size: 14px;
      text-align: center;
      color: @text01;
      gap: 0 12px;
      cursor: pointer;
      font-weight: 400;
      line-height: 22px;
      border-radius: 4px;

      .upload-list-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        > i {
          display: block;
          font-size: 22px;
        }

        .donghua(@DHname) {
          @keyframes @DHname {
            0% {
              transform: rotate(0deg);
            }

            100% {
              transform: rotate(360deg);
            }
          }
        }

        .donghua(myDongHua); // 名称
        .animation(@animation-name,@animation-duration,@animation-timing-function) {
          animation: @arguments;
        }

        .loader-icon {
          .animation(myDongHua,4s,infinite);

          color: rgba(24, 104, 233, 1);
        }
      }

      .upload-list-name {
        .elliptical-1();

        flex: 1;

        p {
          text-align: start;
          .elliptical-1();
        }

        p.name {
          display: block;
        }

        p.message {
          display: none;
        }
      }

      .upload-list-handle {
        display: none;
        margin-left: auto;
      }

      &.error {
        .upload-list-icon,
        .upload-list-name {
          color: @danger;

          > i {
            color: @danger;
          }
        }
      }

      &.successful,
      &.done {
        .upload-list-icon {
          > i {
            color: green;
          }
        }
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);

        .upload-list-handle {
          display: block;
        }

        .upload-list-name {
          p.name {
            display: none;
          }

          p.message {
            display: block;
          }
        }
      }
    }
  }

  :deep(.ant-progress-bg) {
    height: 3px !important;
  }
</style>
